<template>
    <a-form
        ref="formRef"
        :model="formData"
        v-bind="{labelCol: { span: 6 },wrapperCol: { span: 17 }}"
        :rules="props.rules"
    >
      <template v-for="item in props.filedMap" :key="item.name" >
        <a-form-item :name="item.name" :label="item.label" >
           <template v-if="item.type=='text'" >
            
            <a-input v-if="item.name=='url'" v-model:value="formData[item.name]" addon-before="Http://" placeholder="请输入" />
            <a-input v-else-if="item.maxlength" :maxlength="item.maxlength"  v-model:value="formData[item.name]" placeholder="请输入"/>     
            <a-input v-else   v-model:value="formData[item.name]" placeholder="请输入"/>        
            </template>
             <template v-else-if="item.type=='textarea'">
                <a-textarea v-model:value="formData[item.name]" placeholder="请输入" :rows="4" />
              </template> 
              <template v-else-if="item.type=='video'"  >
               <v-radio-dict-item :code="item.code" style="width:100%" v-model:value="formData[item.name]"/>
              </template>
            <template v-else-if="item.type=='select'">
                <v-select-dict-item :code="item.code" style="width:100%"  v-model:value="formData[item.name]"/>
            </template> 
            <template v-else-if="item.type=='date'">
                 <a-date-picker v-model:value="formData[item.name]" style="width:100%" />
            </template> 
             <template v-else-if="item.type=='update'">
                <!-- <v-upload v-model="formData[item.name]" file-type-code="2004"/> -->
            </template>
        </a-form-item>
      </template>
    </a-form>
</template>
<script lang="ts" setup>
import { Ref, ref } from 'vue'
import { FormInstance} from 'ant-design-vue'
import VSelectDictItem from '@/components/VSelectDictItem.vue'
import VRadioDictItem from '@/components/VRadioDictItem.vue'
// import VUpload from '@/components/VUpload.vue';
// const filedMap = {
//   name: {
//     name: 'name',//属性名
//     label: '名称',//
//     type: 'text',//表示是哪种类型的输入框 text/update/textarea/url /select/video/date
//     code:"",//
//     maxlength:11 //最大程度
//   }
// }
const formRef = ref<FormInstance>() as Ref<FormInstance>
const props=defineProps({
    filedMap:<any>{},//需要生成的form表单的字段
  formData: <any>{},//表单数据
  rules:<any>{} //表单校验规则
})
const formData=props.formData
console.log(formData);
const getformData=()=>{//获取修改后的form表单的数据
    return formData
}

defineExpose({ getformData})//暴露出获取表单数据的方法
</script>